<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>模拟杯子水面</title>
    <Style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            height: 100vh;
            overflow: hidden;
            display: flex;
            background:#e0d6d6;
        }
        .glass{
            width: 200px;
            height: 200px;
            box-shadow:inset 0 0 150px #07b1ee;
            margin: auto;
            position: relative;
            overflow: hidden;
            /*clip-path: polygon把一个矩形切割成多边形 */
            clip-path: polygon(
                0 0,
                100% 0,
                170px 100%,
                30px 100%
            );
            /* 将元素剪裁成一个圆 */
            /* clip-path: circle(100px at 50% 50%) */

            /* clip-path: inset(<距离元素上面的距离>,<距离元素右面的距离> ,<距离元素下面的距离>,<距离元素左面的距离>,<圆角边框> ） */
            /* clip-path: inset(2px 2px 20px 20px round 10px); */

            /* clip-path: ellipse 将元素剪裁成一个椭圆 */
            /* clip-path: ellipse(100px 80px at 50% 50%)  */

            /* 这是个五角星 */
            /* clip-path: polygon(35px 40px,50px 0,65px 40px,100px 40px,70px 60px,80px 100px,50px 80px,20px 100px,30px 60px,0px 40px); */
        }
        .glass::before{
            content: "";
            width: 200%;
            height: 200%;
            background: #fff;
            position: absolute;
            top: -150%;
            left: -50%;
            animation: animation 2s linear infinite;
            border-radius: 20% 40% 30% 60%;
        }
        @keyframes animation{
            100%{
                transform: rotate(360deg);
            }
        }
       
        
    </Style>
</head>
<body>
    <div class="glass"></div>
</body>
</html>